<template>
  <div>
    <div class="cfpan" style="width: 130rem;margin-left: auto;margin-right: auto;padding-bottom: 2rem;">
      <!-- 离线推荐的图标 -->
      <div>
        <img src="../../assets/img/Nrq0kndA3m.png" style="width: 10rem;height: 10rem;"/>
      </div>
      <div class="cfpan" style="width: 120rem;margin-left: auto;margin-right: auto;margin-top: -5rem;">
        <div class="cflabel" style="width: 120rem;height: 3rem;margin-left: auto;margin-right: auto;"></div>
        <div style="width: 120rem;height: 1.5rem;margin-left: auto;margin-right: auto;background-color: #DCDFE6;"></div>
        <div class="cfcourse" v-for="course in eduCourses" style="width: 24rem;height: 24rem;display: inline-table;">
          <div style="width: 22rem;height: 22rem;margin-top: auto;margin-bottom: auto;margin-left: auto;margin-right: auto;background-color: #DCDFE6;border-radius: 8px;">
            <div @click="tocourse(course.id)" class="coursepan" style="widtih: 22rem;height: 22rem">
              <!-- 课程图片 -->
              <div style="height: 0.5rem;width: 22rem;"></div>
              <div style="width: 20rem;height: 11rem;margin-left: 1rem;">
                <img class="courseimgpan" :src="course.cover" style="width: 20rem;height: 11rem;"/>
              </div>
              <!-- 课程文字内容 -->
              <div style="width: 20rem;height: 5rem;margin-left: 1rem;">
                <span style="font-weight: bolder;">{{course.title}}</span>
              </div>
              <div style="width: 20rem;height: 5rem;margin-left: 1rem;">
                <div style="width: 20rem;height: 2rem;">
                  <!-- <span style="font-size: small;color: orange;">报名人数:{{course.usercount}}</span> -->
                  <span v-if="course.price!=0" style="font-size: small;color: orange;float: right;">{{course.price}}￥</span>
                </div>
                <div style="width: 20rem;font-size: 11px;height: 2rem;margin-top: 1rem;">
                  <span v-if="course.courseStarttime==null">永久开课</span>
                  <span v-if="course.courseStarttime!=null">开课时间:  {{course.courseStarttime}}~</span><span v-if="course.courseEndtime!=null">{{course.courseEndtime}}</span>
                </div>
              </div>
            </div>
          </div>
        </div>

      </div>



      <!-- 实时图标 -->
      <!-- <div>
        <img src="../../assets/img/xLqBBBMBqN.png" style="width: 10rem;height: 10rem;"/>
      </div> -->
      <!-- <div class="cfpan" style="width: 120rem;margin-left: auto;margin-right: auto;margin-top: -5rem;">
        <div class="cflabelnew" style="width: 120rem;height: 3rem;margin-left: auto;margin-right: auto;">
          <marquee behavior="scroll" title="这个区域后续整合kafka  展示的是的实时推荐课程">这个区域后续整合kafka，展示的是实时推荐的课程</marquee>
        </div>
        <div style="width: 120rem;height: 1.5rem;margin-left: auto;margin-right: auto;background-color: #DCDFE6;"></div>
        <div class="cfcourse" v-for="course in eduCourses" style="width: 24rem;height: 24rem;display: inline-table;">
          <div style="width: 22rem;height: 22rem;margin-top: auto;margin-bottom: auto;margin-left: auto;margin-right: auto;background-color: #DCDFE6;border-radius: 8px;">
            <div class="coursepan" style="widtih: 22rem;height: 22rem">
     
              <div style="height: 0.5rem;width: 22rem;"></div>
              <div style="width: 20rem;height: 11rem;margin-left: 1rem;">
                <img class="courseimgpan" :src="course.cover" style="width: 20rem;height: 11rem;"/>
              </div>
            
              <div style="width: 20rem;height: 5rem;margin-left: 1rem;">
                <span style="font-weight: bolder;">{{course.title}}</span>
              </div>
              <div style="width: 20rem;height: 5rem;margin-left: 1rem;">
                <div style="width: 20rem;height: 2rem;">
                  <span style="font-size: small;color: orange;">报名人数:{{course.usercount}}</span>
                  <span v-if="course.price!=0" style="font-size: small;color: orange;float: right;">{{course.price}}￥</span>
                </div>
                <div style="width: 20rem;font-size: 11px;height: 2rem;margin-top: 1rem;">
                  <span v-if="course.courseStarttime==null">永久开课</span>
                  <span v-if="course.courseStarttime!=null">开课时间:  {{course.courseStarttime}}~</span><span v-if="course.courseEndtime!=null">{{course.courseEndtime}}</span>
                </div>
              </div>
            </div>
          </div>
        </div>

      </div> -->
    </div>
  </div>
</template>

<script>
  import bigdata from '@/api/bigdata/bigdata'
  import cookie from 'js-cookie'
  export default{
    data(){
      return{
         loginInfo: {},
         eduCourses: [],
      }
    },
    methods:{
      getcoursecf(uid){
        bigdata.getcfoffline(uid).then(response => {
          this.eduCourses=response.data.data.eduCourses
        })
      },
      //页面跳转
        tocourse(id){
         let newtarg=this.$router.resolve({
           path: '/course/'+id,
         })
         window.open(newtarg.href, '_blank');
        }
    },
    created(){
      if(cookie.get("uicenterMember")){
        console.log('测试登录信息存在情况:',cookie.get("uicenterMember"))
        this.loginInfo=JSON.parse(cookie.get("uicenterMember"))
        console.log('测试登录信息存在情况:',this.loginInfo)
        this.getcoursecf(this.loginInfo.id)
      }
    }
  }
</script>

<style>
  .cfpan{
    background-image: linear-gradient(135deg, #fdfcfb 0%, #e2d1c3 100%);
  }
  .cflabel{
  background-image: linear-gradient(60deg, #abecd6 0%, #fbed96 100%);
  }
  .cflabelnew{
    background-image: linear-gradient(-225deg, #FFE29F 0%, #FFA99F 48%, #FF719A 100%);
  }
  .cfcourse{
    background-color: #DCDFE6;
  }
</style>
